﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="">
    <meta name="keywords" content="0">
    <title>浪潮智联</title>
	<link rel="stylesheet" href="${s.base}/mobile/css/style.css">
	<link rel="stylesheet" href="${s.base}/js/layui/css/layui.css" media="all" />
	<script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
	<script type="text/javascript" src="${s.base}/jslayui/layui.js"></script>
    <style type="text/css">

		<!--
		body {
	           
                        background:#0099cc;
                        width:100%; 
                        height:100%; 
                   
                    }
		-->

		#head{width: 96%;height: 80px;margin-left: 2%;}
		#head ul{width: 100%;}
		#head ul li{float: left;line-height: 80px;}
		#head ul .title{width: 28%; text-align: left;font-size: 20px;color:#ffffff;font-weight: bold;}
		#head ul .btn{width: 70%; text-align: right;line-height: 80px;}
		#head ul .btn input{float: right; margin-right: 2%; width: auto; height: 36px; margin-top: 20px;font-size: 12px;color:#ffffff;}
		#content{width: 96%;margin-left: 2%;}
		#content .team{width: 100%;}
		#content .team ul{width: 90%; height: 80px;padding: 5px 5%; margin: 5px 0px; background-color: rgba(255,255,255,0.2);border-radius: 10px;}
		#content .team ul li{float: left;opacity:1;}
		#content .team ul .show_image{width: 20%;text-align: center;line-height: 80px;}
		#content .team ul .show_image img{width: 60px;height: 60px;}
		#content .team ul .show_title{width: 80%;}

		#content .team ul .show_title div{width: 100%;line-height:40px; margin-left: 10px; font-size: 20px;color: #ffffff;text-align: left;}
		#content .team ul .show_set{width: 15%; text-align: right; font-size: 20px;font-weight: bold; line-height: 40px;}
		#content .team ul .show_title_device{width: 80%;}
		#content .team ul .show_title_device div{width: 100%;line-height:40px; margin-left: 10px; font-size: 20px;color: #ffffff;text-align: left;}
		#content .team ul .show_set_device{width: 30%; text-align: right; font-size: 20px;font-weight: bold; line-height: 40px;}
		#content .team ul .show_Value{width: 45%;  margin-left: 10px; text-align: left; font-size: 15px;color: #ffffff;line-height: 40px;}
		#content .team ul .show_Value_relay{width: 60%;  margin-left: 10px; text-align: left; font-size: 15px;color: #ffffff;line-height: 40px;}

		.red{color:#FF0000;}
		.org{color:#F77303;}
		.gree{color:#9AFC02;}

		/**
        *弹窗页面
        */
		.ysq_alert{
			width:90%;
			margin-left: 10%;
			height:180px;
			padding: 20px 0px;
			background: #5F5F73;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius:10px;
			-moz-border-radius:10px;
			text-align: center;
		}
		.ysq_alert li{
			height: 55px;
			line-height: 55px;
			font-size: 28px;
			color: #FFFFFF;
		}
		.ysq_alert .alert_btn div{
			float: left;
			width: 50%;
		}
		.ysq_alert .alert_btn_left{
			text-align: right;
		}
		.ysq_alert .alert_btn_right{
			text-align: left;
		}
		.ysq_alert .alert_btn input{
			padding: 5px;
			font-size: 28px;
			color: #000000;
			margin: 10px 20px;
			border-radius:10px;
			-moz-border-radius:10px;
		}
	</style>
</head>

<body style="max-width:640px;">
<div style="position:absolute; width:100%; height:100%; z-index:-1">
	<img style="position:fixed;" src="${s.base}/mobile/img/bj.jpg" height="100%" width="100%" />
</div>
  
  <div id="head">
  	<ul>
  		<li class="title">
  			浪潮智联
  		</li>
  		<li class="btn">
			<input type="button" onClick="window.location.href='${s.base}/inspur/add/${openid}'" class="layui-btn layui-btn-radius layui-btn-normal" value="添加设备"/>

			<input type="button" onClick="window.location.href='${s.base}/inspur/bind/${openid}'" class="layui-btn layui-btn-radius layui-btn-normal" value="绑定账号"/>
  		</li>
  	</ul>
  </div>
  <div id="content">

	  <div class="team">
		  <#if deviceList?? && (deviceList?size > 0)>
		  <#list deviceList as deviceProduct>
		  <ul>
			  <li class="show_image" onclick="window.location.href='${s.base}/inspur/device/${openid}?id=${deviceProduct.id}'"><img src="${s.base}/mobile/img/6.png" /></li>
			  <li class="show_title_device" onclick="window.location.href='${s.base}/inspur/device/${openid}?id=${deviceProduct.id}'">
				  <div style="width:100%;font-size: 17px;color: #ffffff;">${deviceProduct.name}
					  <#if deviceProduct.newProduct.deviceType=="1">
					  <span class="gree">(在线)</span>
					  <#else>
					  <span class="red">(离线)</span>
				  </#if>

	  </div>
	  </li>

	  <div style="width:100%;">
		  <li class="show_Value" onclick="window.location.href='${s.base}/inspur/device/${openid}?id=${deviceProduct.id}'">


			  <#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
			      AQI:${deviceProduct.newProduct.aqi}
		  </li>

		  <li class="show_set_device" ><span onclick="setValue('AQI','${deviceProduct.id}','${deviceProduct.maxSendValue}')">设置</span>&nbsp;&nbsp;<span onclick="deleteDevice('${deviceProduct.id}','${deviceProduct.name}')">删除</span><li>
	  </div>
             </#if>

             <#if deviceProduct.type=="8">
                  Co2:${deviceProduct.newProduct.co2}ug/m3
           </li>

           <li class="show_set_device" ><span onclick="setValue('Co2','${deviceProduct.id}','${deviceProduct.maxSendValue}')">设置</span>&nbsp;&nbsp;<span onclick="deleteDevice('${deviceProduct.id}','${deviceProduct.name}')">删除</span></li>
      </div>
             </#if>

             <#if deviceProduct.type=="9"||deviceProduct.type=="10">
                  O2:${deviceProduct.newProduct.o2}ug/m3

          </li>
          <li class="show_set_device" ><span onclick="setValue('O2','${deviceProduct.id}','${deviceProduct.maxSendValue}')">设置</span>&nbsp;&nbsp;<span onclick="deleteDevice('${deviceProduct.id}','${deviceProduct.name}')">删除</span></li>
      </div>
             </#if>

             <#if deviceProduct.type=="12"||deviceProduct.type=="13"||deviceProduct.type=="11">
               HCHO:${deviceProduct.newProduct.hcho}ug/m3

          </li>
          <li class="show_set_device" ><span onclick="setValue('HCHO','${deviceProduct.id}','${deviceProduct.maxSendValue}')">设置</span>&nbsp;&nbsp;<span onclick="deleteDevice('${deviceProduct.id}','${deviceProduct.name}')">删除</span></li>
      </div>
             </#if>

             <#if deviceProduct.type=="17">
               TEMP:${deviceProduct.newProduct.temr}ug/m3

          </li>
          <li class="show_set_device" ><span onclick="setValue('TEMP','${deviceProduct.id}','${deviceProduct.maxSendValue}')">设置</span>&nbsp;&nbsp;<span onclick="deleteDevice('${deviceProduct.id}','${deviceProduct.name}')">删除</span></li>
      </div>
             </#if>
      </ul>
      </#list>
      </#if>


		<#if relayList?? && (relayList?size > 0)>
			<#list relayList as product>
               <ul>
	             <li class="show_image" onclick="window.location.href='${s.base}/phone/relay/${openid}?relayEntityId=${product.relayEntityId}'"><img img src="${s.base}/mobile/img/5.png" /></li>
	             <li class="show_title" onclick="window.location.href='${s.base}/phone/relay/${openid}?relayEntityId=${product.relayEntityId}'">
		               <div style="width:100%;font-size: 17px;color: #ffff00;">${product.name}
			             <#if product.deviceType=="1">
			                 <span class="gree">(在线)</span>
			             <#else>
			                 <span class="red">(离线)</span>
		                 </#if>
		               </div>
	             </li>
	             <div style="width:100%;">
		            <li class="show_Value_relay">
			            <#if product.relayPower=="1">
			                 开机<#else>关机
		                </#if>
		                      &nbsp;&nbsp;
		                      ${product.relayKm}档&nbsp;&nbsp;
		                <#if product.relayAuto=="1">
		                      自动<#else>手动
	                    </#if>
	                </li>

	                <li class="show_set" onclick="deleteDevice('${product.id}','${product.name}')">删除</li>
	             </div>
               </ul>
			</#list>
		</#if>
  	</div>
  </div>

<div id="alert_config" class="ysq_alert" style="display: none;" >
	<ul>
		<li class="alert_title" style="text-align: left;padding-left: 20px;">
			<span id="alert_show_title"></span>预警最大值：
		</li>
		<li class="alert_title">
			<input type="hidden" id="id"   class="layui-input" style="width: 80%;line-height: 28px;margin-left: 10%;"/>
			<input type="number" id="maxValue"  placeholder="请设置最大预警值" class="layui-input" style="width: 80%;line-height: 28px;margin-left: 10%;"/>
		</li>
		<li class="alert_btn">
			<div class="alert_btn_left">
				<input type="button" onclick="setCityContent()" value="确定"/>
			</div>
			<div class="alert_btn_right">
				<input type="button" onclick="lysc()" value="取消"/>
			</div>
		</li>

	</ul>
</div>


<div id="alert_config_delete" class="ysq_alert" style="display: none;" >
	<ul>
		<li class="alert_title" style="text-align: left;padding-left: 20px;">
			温馨提示：
		</li>
		<li class="alert_title">
			<input type="hidden" id="productId"   class="layui-input" style="width: 80%;line-height: 28px;margin-left: 10%;"/>
			确定删除【<span id="showDeviceName"></span>】吗？
		</li>
		<li class="alert_btn">
			<div class="alert_btn_left">
				<input type="button" onclick="deleteContent()" value="确定"/>
			</div>
			<div class="alert_btn_right">
				<input type="button" onclick="lysc()" value="取消"/>
			</div>
		</li>

	</ul>
</div>
<script type="text/javascript">

    function setValue(name,id,maxValue) {
        $("#id").val(id);
        $("#maxValue").val(maxValue);
        $("#alert_show_title").html(name);
        $("#alert_config").show();
    }
    function lysc() {
        $(".ysq_alert").hide();
    }

    function deleteDevice(productId,productName) {
        $("#productId").val(productId);
        $("#showDeviceName").html(productName);
        $("#alert_config_delete").show();
    }


    function setCityContent() {
        var id=$("#id").val();
        var maxSendValue=$("#maxValue").val();

        if(maxSendValue==""||maxSendValue==null){
            alert("请先设置最大报警值！");
            return false;
        }

        $.ajax({
            type: "POST",
            url: "/inspur/updateDeviceMaxValue",
            data: {"id":id,"maxSendValue":maxSendValue},
            success: function(result){
                if(1==result.returnInfo.state){
                    window.location.reload();
                }else{
                    alert(result.returnInfo.errorMsg);
                }
            },
            error: function(result){
                alert(result);
            }
        });
    }

    function deleteContent() {


        $.ajax({
            type: "POST",
            url: "/inspur/deleteDevice",
            data: {"productId":$("#productId").val()},
            success: function(result){
                if(1==result.returnInfo.state){
                    window.location.reload();
                }else{
                    alert(result.returnInfo.errorMsg);
                }
            },
            error: function(result){
                alert(result);
            }
        });
    }

</script>
</body>

</html>
